<script setup>

import {GET} from "../../../api/index.js";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import CEchartsStock from "../../../c-components/c-echarts-stock.vue";
import CLCandlestick from "../../../utils/CLCandlestick.js";
import EchartsOption from "../../../utils/EchartsOption.js";
const route = useRoute()
const lines = ref([])
const trainRecordList = ref([])
const echartsRef = ref(null)

const getDetail = (id) => {
  GET(`/futures/train/${id}`).then(res => {
    console.log(res)
    lines.value = JSON.parse(res.data.lineData)
    trainRecordList.value = res.data.trainRecordDTOList

    const optionData = getEchartsData(lines.value, 0, false)

    let markPoint = {
      symbol: 'circle',
      symbolSize: 20,
      label: {
        // show: false
      },
      data: trainRecordList.value.map(item => {
        if (item.type === 2) {
          // 顶型
          return {
            name: 'Mark',
            coord: [item.tradeDate, item.price],
            value: 'S',
            symbolRotate: 0,
            symbolOffset: [0, '-200%'],
            itemStyle: {
              color: 'rgb(0,255,0)'
            }
          }
        } else if(item.type === 1){
          // 底型
          return  {
            name: 'Mark',
            coord: [item.tradeDate, item.price],
            value: 'B',
            symbolRotate: 180,
            symbolOffset: [0, '200%'],
            itemStyle: {
              color: 'rgb(255,0,0)'
            }
          }
        } else {
          return  {
            name: 'Mark',
            coord: [item.tradeDate, item.price],
            value: 'P',
            symbolRotate: 180,
            symbolOffset: [0, '200%'],
            itemStyle: {
              color: 'rgb(0,0,255)'
            }
          }
        }
      }),
      tooltip: {
        formatter: function (param) {
          return '';
        }
      }
    }

    const echartsData = new CLCandlestick(lines.value, {pageSize: 0, isJoinShow: false,  isLineShow: true, isSegmentShow: true}).getData()
    const option = new EchartsOption(echartsData, {pageSize: 0, isJoinShow: false, isShowX: true}).getOption()

    option.series[0].markPoint = markPoint

    echartsRef.value.setEchartsOption(option)

  })
}
onMounted(() => {
  getDetail(route.query.id)
})

</script>

<template>
<div class="record-detail">
  <c-echarts-stock ref="echartsRef"></c-echarts-stock>
</div>
</template>

<style scoped lang="scss">
.record-detail{
  height: 100%;
  background-color: #FFFFFF;
}
</style>
